<template>
	<div class="big_box">
		<div class="left">
			<div style="margin-bottom: 15px;">
			  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
			    <el-select style="width: 100px;" v-model="select" slot="prepend" placeholder="请选择">
			      <el-option label="餐厅名" value="1"></el-option>
			      <el-option label="订单号" value="2"></el-option>
			      <el-option label="用户电话" value="3"></el-option>
			    </el-select>
			    <el-button slot="append" icon="el-icon-search"></el-button>
			  </el-input>
			</div>
			<div class="left_box1">
				<div class="title">
					<div></div>
					<div>运营数据</div>
				</div>
				<div class="left_yunying">
					<div class="left_yunying1">
						<img src="../assets/logo.png" alt="">
						<div>
							<div style="font-size: 12px;margin-bottom: 9px;">车辆运营</div>
							<div>66/126</div>
						</div>
					</div>
					<div class="left_yunying1">
						<img src="../assets/logo.png" alt="">
						<div>
							<div style="font-size: 12px;margin-bottom: 9px;">车辆运营</div>
							<div>66/126</div>
						</div>
					</div>
					<div class="left_yunying1">
						<img src="../assets/logo.png" alt="">
						<div>
							<div style="font-size: 12px;margin-bottom: 9px;">车辆运营</div>
							<div>66/126</div>
						</div>
					</div>
				</div>
				<div class="left_title">
					<div class="line"></div>
					<div>运营数据</div>
				</div>
				<div class="left_foot">
					<div>
						<div class="left_foot_title">车辆状态</div>
						<div class="left_foot1">
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
						</div>
					</div>
					<div class="line2"></div>
					<div>
						<div class="left_foot_title">车辆状态</div>
						<div class="left_foot1">
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
							<div>
								<div class="num">123</div>
								<div>未租</div>
							</div>
						</div>
					</div>
				</div>
				
				
			</div>
			<div class="left_box2">
				<div class="title">
					<div></div>
					<div>消息提醒</div>
				</div>
				<div class="left_box2_1">
					<div class="left_box2_2">
						 <img src="../assets/7.png" alt="">
						<div>
							<div>123</div>
							<div>租金逾期</div>
						</div>
					</div>
					<div class="left_box2_2">
						 <img src="../assets/7.png" alt="">
						<div>
							<div>123</div>
							<div>租金逾期</div>
						</div>
					</div>
				</div>
			</div>
			<div class="left_box3">
				<div class="left_box3_head">
					<div class="title" style="margin-bottom: 0;">
						<div></div>
						<div>消息提醒</div>
					</div>
					<div>查看更多</div>
				</div>
				<div>2020-01-01  XXXXXXXXXXXXXXXXX</div>
			</div>
			
		</div>
		<div class="right">
			<div class="right_1">
				<div class="title">
					<div></div>
					<div>运营数据</div>
				</div>
				<div class="right_2">
					<el-button  type="primary">我发起的(0)</el-button>
					<el-button  type="primary">待我审批(0)</el-button>
					<el-button  type="primary">抄送我的(0)</el-button>
				</div>
			</div>
			<div class="right_3"></div>
			<div class="right_4">
				<div class="title">
					<div></div>
					<div>快捷入口</div>
				</div>
				<div class="right_5">
					<div>新增车辆</div>
					<div>新增车辆</div>
					<div>新增车辆</div>
					<div>新增车辆</div>
					<div>新增车辆</div>
					<div>新增车辆</div>
					<div>新增车辆</div>
					<div>新增车辆</div>
				</div>
			</div>
			<div class="right_6">
				<div class="title" style="margin-bottom: 18px;">
					<div></div>
					<div>今日工作提醒</div>
				</div>
				<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
				    <el-radio-button label="1">事务提醒</el-radio-button>
				    <el-radio-button label="2">事务提醒</el-radio-button>
				    <el-radio-button label="3">事务提醒</el-radio-button>
				    <el-radio-button label="4">事务提醒</el-radio-button>
				</el-radio-group>
				<div class="right_7">
					<div>闽D88888 司机 1380000011 租金逾期</div>
					<div>闽D88888 司机 1380000011 租金逾期</div>
					<div>闽D88888 司机 1380000011 租金逾期</div>
					<div>闽D88888 司机 1380000011 租金逾期</div>
					<div>闽D88888 司机 1380000011 租金逾期</div>
					<div>闽D88888 司机 1380000011 租金逾期</div>
				</div>
				
			</div>
			
		</div>
		
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabPosition: '1',
			    input3: '',
			    select: ''
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	::-webkit-scrollbar-thumb{
	   background: #FFFFFF;
	   border-radius:10px;
	}
	.right ::-webkit-scrollbar {
		width: 4px;
		height: 4px;
		background-color: #FFFFFF;
	}
	.right_7>div{
		margin-bottom: 10px;
	}
	.right_7{
		max-height: 100px;
		overflow: hidden;
		overflow-y: scroll;
		color: rgba(0, 0, 0, 1);
		font-size: 14px;
		font-family: Helvetica-light;
	}
	.right_6{
		margin-bottom: 9px;
		padding: 23px;
		box-sizing: border-box;
		background: #FFFFFF ;
	}
	.right_5>div{
		width: 113px;
		height: 30px;
		margin-right: 40px;
		margin-bottom: 11px;
		background: #B0C3F7;
		color: rgba(0, 0, 0, 1);
		font-size: 14px;
		font-family: Helvetica-light;
		border-radius: 5px;
		line-height: 30px;
		text-align: center;
	}
	.right_5{
		max-height: 200px;
		overflow: hidden;
		overflow-y: scroll;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.right_4{
		margin-bottom: 10px;
		padding: 23px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.right_3{
		height: 289px;
		margin-bottom: 9px;
		padding: 23px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.right_2{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.right_1{
		margin-bottom: 9px;
		padding: 23px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.left_box3_head{
		margin-bottom: 17px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(23, 133, 251, 1);
		font-size: 13px;
		font-family: SourceHanSansSC-regular;
	}
	.left_box3{
		margin-bottom: 14px;
		padding: 23px;
		box-sizing: border-box;
		overflow: hidden;
		background: #FFFFFF;
		color: rgba(16, 16, 16, 1);
		font-size: 13px;
		font-family: SourceHanSansSC-regular;
	}
	.left_box2_2>div :nth-child(1){
		font-size: 16px;
	}
	.left_box2_2>img{
		width: 50px;
		height: 50px;
		margin-right: 7px;
		border-radius: 50px;
	}
	.left_box2_2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(16, 16, 16, 1);
		font-size: 13px;
		font-family: SourceHanSansSC-regular;
		margin: 0 37px 50px 0;
	}
	.left_box2_1{
		max-height: 300px;
		overflow: hidden;
		overflow-y: scroll;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.left_box2{
		margin-bottom: 14px;
		padding: 23px;
		box-sizing: border-box;
		overflow: hidden;
		background: #FFFFFF;
	}
	.num{
		font-size: 16px;
		margin-bottom: 20px;
	}
	.left_foot>div{
		width: 49%;
	}
	.line2{
		width: 0px !important;
		height: 45px;
		border: 1px solid rgba(187, 187, 187, 1);
		margin-top: 50px;
	}
	.left_foot_title{
		color: rgba(16, 16, 16, 1);
		margin-bottom: 35px;
		font-size: 12px;
		font-family: SourceHanSansSC-regular;
	}
	.left_foot1{
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: rgba(16, 16, 16, 1);
		font-size: 12px;
		font-family: SourceHanSansSC-regular;
		text-align: center;
	}
	.left_foot{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.line{
		width: 3px;
		height: 12px;
		border-radius: 2px;
		background-color: rgba(5, 106, 255, 1);
		border: 1px solid rgba(255, 255, 255, 0);
		margin-right: 5px;
	}
	.left_title{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		font-family: SourceHanSansSC-regular;
		margin-bottom: 20px;
	}
	.left_yunying1>img{
		width: 76px;
		height: 63px;
		margin-right: 23px;
	}
	.left_yunying1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(16, 16, 16, 1);
		font-size: 20px;
		font-family: SourceHanSansSC-regular;
	}
	.left_yunying{
		margin-bottom: 57px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.title :nth-child(1){
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 1px solid #000000;
		margin-right: 3px;
	}
	.title{
		margin-bottom: 30px;
		background: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		font-family: SourceHanSansSC-regular;
	}
	.left_box1{
		margin-bottom: 14px;
		padding: 23px;
		box-sizing: border-box;
		overflow: hidden;
		background: #FFFFFF;
	}
	.right{
		width: calc(40% - 20px);
		height: calc(100vh - 71px);
		overflow: hidden;
		overflow-y: scroll;
		
	}
	.left{
		width: 60%;
		height: calc(100vh - 71px);
		overflow: hidden;
		overflow-y: scroll;
	}
	.big_box{
		display: flex;
		justify-content: space-around;
	}
</style>
